<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">新建团队</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="ibvosdyd">
            <div class="tanname">团队名称</div>
            <div class="inoebbs">
                <input type="text" v-model="name" placeholder="输入团队名称">
            </div>

            <div class="shezhie">设置汇率</div>
            <div class="u_bodys">
                <div class="u_heade">
                    <div class="usdersd" :class="actives == index? 'ab_usd':''" v-for="(item,index) in u_list" :key="index" @click="newdata(index)">
                        <div>{{item}}</div>
                        <img v-show="actives == index" src="../../../static/images/setyrbu.png" alt="">
                    </div>
                </div>

                <div class="setting">设置扫码汇率</div>

                <!-- 支付宝 -->
                <div class="scheduleList" v-for="(item,index) in exchange" :key="index" v-if="item.businessType !=  'POS'">
                    <div class="left">
                        <!-- 支付宝 -->
                        <img v-if="item.businessType ==  'AliPay' " src="../../../static/images/icon-zfb.png" alt="">
                        <!-- 微信 -->
                        <img v-if="item.businessType ==  'WeChatPay' " src="../../../static/images/icon-wzzf.png" alt="">
                        <!-- POS -->
                        <img v-if="item.businessType ==  'POS' " src="../../../static/images/icon-ysf.png" alt="">
                        <!-- 银联云闪付 -->
                        <img v-if="item.businessType ==  'UnionPay' " src="../../../static/images/icon-ysf.png" alt="">

                        <div class="title" v-if="item.businessType ==  'AliPay' ">支付宝</div>
                        <div class="title" v-if="item.businessType ==  'WeChatPay' ">微信</div>
                        <div class="title" v-if="item.businessType ==  'POS' ">POS</div>
                        <div class="title" v-if="item.businessType ==  'UnionPay' ">银联云闪付</div>
                    </div>
                    <div class="right" v-if="actives == 0">{{item.value}}%</div>
                    <div class="inputes" v-if="actives == 1">
                        <input type="number" v-model="item.value" placeholder="item.value">
                        <div class="bvaefe">%</div>
                    </div>
                </div>
                <!-- 微信 -->
                <!-- <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-wzzf.png" alt="">
                        <div class="title">微信</div>
                    </div>
                    <div class="right">0.23%</div>
                </div> -->
                <!-- 云闪付 -->
                <!-- <div class="scheduleList">
                    <div class="left">
                        <img src="../../../static/images/icon-ysf.png" alt="">
                        <div class="title">云闪付</div>
                    </div>
                    <div class="right">0.23%</div>
                </div> -->
                <div class="setting" v-if="POsrate != '' ">设置POS刷卡费率</div>
                <!-- 信用卡 -->
                <div class="scheduleList" v-if="POsrate != '' ">
                    <div class="left">
                        <img src="../../../static/images/icon-xyk.png" alt="">
                        <div class="title">信用卡</div>
                    </div>
                    <div class="right" v-if="actives == 0">{{POsrate.creditFeeRateValue}}%</div>
                    <div class="inputes" v-if="actives == 1">
                        <input type="number" v-model="POsrate.creditFeeRateValue" placeholder="POsrate.creditFeeRateValue">
                        <div class="bvaefe">%</div>
                    </div>
                </div>
                <!-- 储蓄卡 -->
                <div class="scheduleList" v-if="POsrate != '' ">
                    <div class="left">
                        <img src="../../../static/images/icon-cxk.png" alt="">
                        <div class="title">储蓄卡</div>
                    </div>
                    <div class="right" v-if="actives == 0">{{POsrate.debitFeeRateValue}}%</div>
                    <div class="inputes" v-if="actives == 1">
                        <input type="number" v-model="POsrate.debitFeeRateValue" placeholder="POsrate.debitFeeRateValue">
                        <div class="bvaefe">%</div>
                    </div>
                </div>
                <!-- 储蓄卡封顶手续费 -->
                <div class="scheduleList" v-if="POsrate != '' ">
                    <div class="left">
                        <img src="../../../static/images/icon-xyk.png" alt="">
                        <div class="title">储蓄卡封顶手续费</div>
                    </div>
                    <div class="right" v-if="actives == 0">{{POsrate.debitFeeRateMax}}元</div>
                    <div class="inputes" v-if="actives == 1">
                        <input type="number" v-model="POsrate.debitFeeRateMax" placeholder="POsrate.debitFeeRateMax">
                        <div class="bvaefe">元</div>
                    </div>
                </div>
                <!-- 小额双免费率 -->
                <div class="scheduleList" v-if="POsrate != '' ">
                    <div class="left">
                        <img src="../../../static/images/icon-sk.png" alt="">
                        <div class="title">小额双免费率</div>
                    </div>
                    <div class="right" v-if="actives == 0">{{POsrate.smallAmountFeeRateValue}}%</div>
                    <div class="inputes" v-if="actives == 1">
                        <input type="number" v-model="POsrate.smallAmountFeeRateValue" placeholder="POsrate.smallAmountFeeRateValue">
                        <div class="bvaefe">%</div>
                    </div>
                </div>
            </div>

            <div class="inokcent" @click="toindex()">确定</div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant';
import { Notify } from 'vant';
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            actives:0,
            u_list:['同总部汇率','自定义汇率'],
            exchange:JSON.parse(localStorage.getItem('businesses')),//汇率
            POsrate:'', ///pos费率
            name:'',//团队名称
        }   
    },
    mounted(){
        console.log(JSON.parse(localStorage.getItem('businesses')));
        var adderry = JSON.parse(localStorage.getItem('businesses'))
        adderry.forEach((item,index)=>{
            if(item.businessType == 'POS'){
                this.POsrate = item
            }
        })
    },
    methods:{
        newdata(index){
            this.actives = index
            if(index == '1'){
                //  console.log(this.exchange)
            }else{
                this.exchange = JSON.parse(localStorage.getItem('businesses'))//汇率
                // pos费率
                var adderry = JSON.parse(localStorage.getItem('businesses'))
                adderry.forEach((item,index)=>{
                    if(item.businessType == 'POS'){
                        console.log(item)
                        this.POsrate = item
                    }
                })
            }
        },

        // 新建团队
        toindex(){
            if(this.name == ''){
                Notify({ type: 'warning', message: '请输入团队名称' });
                return;
            }
            if(this.actives == '1'){
                //  console.log(this.exchange)
            }else{
                this.exchange = JSON.parse(localStorage.getItem('businesses'))//汇率
                // pos费率
                var adderry = JSON.parse(localStorage.getItem('businesses'))
                adderry.forEach((item,index)=>{
                    if(item.businessType == 'POS'){
                        this.POsrate = item
                    }
                })
            }
            // 定义一个传个后台的数据类型
            var roteos = []
           
            // 先循环扫码费率数组
            this.exchange.forEach((item)=>{
                // 过滤pos
                if(item.businessType != 'POS'){
                    // 给定义的数据类型赋值
                    roteos.push({businessType:item.businessType,value:item.value})
                }
            })

            // 判断pos费率不为空
            if(this.POsrate && JSON.parse(localStorage.getItem('businesses')).length >0){
                // 给定义的数据类型赋值 pos费率
                roteos.push(
                    {
                        businessType:this.POsrate.businessType, //类型
                        debitFeeRateValue:this.POsrate.debitFeeRateValue,//储蓄卡
                        debitFeeRateMax:this.POsrate.debitFeeRateMax,//储蓄卡封顶手续费
                        creditFeeRateValue:this.POsrate.creditFeeRateValue,//信用卡
                        smallAmountFeeRateValue:this.POsrate.smallAmountFeeRateValue,//小额双免费率
                    }
                )
            }
            this.addproup(roteos)
            console.log(roteos)
            // this.$router.push({ name: "Index" });
        },
        addproup(roteos){
            Dialog.confirm({
                title: '提示',
                message: '确认好信息,新增团队',
            })
            .then(() => {
                let data = {
                    id	:'',//团队ID,编辑时必填
                    name:this.name,//团队名称
                    description:'',//描述
                    businesses:roteos,//业务信息
                }
                // on confirm
                this.$api.addbteams(data).then((res)=>{
                    console.log(res);
                    if(res.status == '0000'){
                        Notify({ type: 'success', message: '创建成功' });
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1000);
                    }else{
                        Notify({ type: 'warning', message: res.describe });
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        },
    }

}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .ibvosdyd{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    .headername{
        width: 100%;
        height: 56px;
        border-radius: 4px;
        padding: 0 16px;
        box-sizing: border-box;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .headername>.zuobian{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .headername>.youbian{
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .shezhie{
        width: 100%;
        padding: 12px 0;
        box-sizing: border-box;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .u_bodys{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
    }
    .u_heade{
        width: 100%;
        /* padding: 0 40px;
        box-sizing: border-box; */
        display: flex;
        align-items: centerc;
        justify-content: center;
    }
    .usdersd{
        width: 104px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #BDBDBD;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
        position: relative;
    }
    .usdersd:nth-child(1){
        margin-right: 20px;
    }
    .usdersd>img{
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        right: -1px;
    }
    .ab_usd{
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #3288FF !important;
 
    }

    .setting{
        width: 100%;
        margin-top: 24px;
        margin-bottom: 8px;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .scheduleList{
        width: 100%;
        height: 41px;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .scheduleList>.left{
        display: flex;
        align-items: center;
    }
    .scheduleList>.left>img{
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }
    .scheduleList>.left>.title{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .scheduleList>.right{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .inokcent{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .tanname{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
        margin-bottom: 16px;
    }

    .inoebbs{
        width: 100%;
        height: 48px;
        background: #fff;
        border-radius: 4px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .inoebbs>input{
        width: 100%;
        border: 0;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .inputes{
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .inputes>input{
        border: 0;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        text-align: right;
    }
    .bvaefe{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
</style>